<template>
  <div class="w-full h-26">
    <div class="w-full h-26 p-1">
      <div class="h-6 text-center border-b">{{ title }}</div>
      <div class="flex items-center">
        <div
          class="flex items-center justify-center h-20 text-right w-full"
          :style="{
            backgroundImage: `url(${img})`,
            backgroundPositionX: '-25px',
            backgroundSize: '100% 100%',
            backgroundRepeat: 'no-repeat',
          }"
        >
          <div :class="`${fontSizeClass} ${paddingClass}`">{{ value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { toRefs } from 'vue';

// Define props
const props = defineProps({
  value: String,
  title: String, // Define qweather as an object prop
  img: String,
  paddingClass: {
    type: String,
    default: 'pl-6', // Set default value for paddingClass
  },
  fontSizeClass: {
    type: String,
    default: 'text-2xl', // Set default value for paddingClass
  },
});

// Destructure the qweather prop
const { value, title, img } = toRefs(props);
</script>
<style scoped lang="less"></style>
